import React, { Component } from 'react';
import "./Model3.css"

class Model3 extends Component {
  constructor(props){
    super(props)
    this.state=({
      songsing:[],
      singsong:[]
    })
  }
  render() {
    return (
      <div>
        <div style={{textAlign:'left',fontSize:'15px', padding:"10px"}}>官方帮</div>
        <div style={{padding:"0 10px"}}>
          {this.state.songsing.map((item,index)=>
            <div key={index} className="G-song">
            <div className="G-img"><div className="G-imgs"><img src={item.coverImgUrl} alt="" /></div>
            <div className="G-songname" >{item.tracks.map((item1,index1)=><div key={index1} className="G-xinxi">
              {index1+1}.{item1.first}-{item1.second}
            </div>)}</div></div>
          </div>)}
         </div>
          <div style={{textAlign:'left',fontSize:'15px',padding:"10px"}}>全球榜</div>
          <div className="G-Q">
            {this.state.singsong.map((item,index)=>
              <div key={index} className="G-Q-gd">
                <img src={item.coverImgUrl} alt="" />
              </div>
            )}
          </div>
          
      </div>
    );
  }
  componentDidMount(){
    this.$axios([
      {
        url:"http://localhost:9115/toplist/detail"
      }
    ]).then(res=>{
      this.setState({
        songsing:res[0].list.slice(0,4),
        singsong:res[0].list.slice(4,33)
      })
    }).catch(err=>console.log(err))
  }
}

export default Model3;